<template>
    <div id="gdMapCon"></div>
</template>
 
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted } from "vue";
import { ElMessage } from 'element-plus'
import appleImg from '../assets/apple.png'
let map = null;

window._AMapSecurityConfig = {
    securityJsCode: "8b0cafe237d097e9bdb35cce397e294d",
};
onMounted(() => {
    AMapLoader.load({
        key: "561b1714c178acc3126a7c97cf293195",
        version: "2.0",
        plugins: [],
    })
        .then((AMap) => {
            // 行政区划分
            AMap.plugin("AMap.DistrictSearch", function () {
                var opts = {
                    subdistrict: 0,
                    extensions: 'all',
                    level: 'province'
                };

                var district = new AMap.DistrictSearch(opts);
                district.search('山东省', function (status, result) {
                    var bounds = result.districtList[0].boundaries;
                    var mask = []
                    for (var i = 0; i < bounds.length; i += 1) {
                        mask.push([bounds[i]])
                    }
                    var map = new AMap.Map('gdMapCon', {
                        mask: mask,
                        center: [117.808, 36.239],
                        viewMode: '2D',
                        showLabel: false,
                        labelzIndex: 130,
                        pitch: 40,
                        zoom: 8,
                        layers: [
                            new AMap.TileLayer.RoadNet({
                                //rejectMapMask:true
                            }),
                            new AMap.TileLayer.Satellite()
                        ]
                    });

                    //添加描边
                    for (var i = 0; i < bounds.length; i++) {
                        new AMap.Polyline({
                            path: bounds[i],
                            strokeColor: '#2b2d34',
                            strokeWeight: 4,
                            map: map
                        })
                    }

                    // 添加覆盖物
                    var lnglats = [
                        [117.808, 36.239],
                        [116.468, 36.237],
                        [117.779, 36.023],
                        [116.467, 36.238],
                        [119.893, 35.978],
                        [119.919, 36.247],
                        [120.388, 36.723],
                        [120.457, 36.486],
                        [120.389, 36.723],
                        [120.229, 36.916],
                        [118.310, 36.050],
                        [118.214, 36.027],
                        [118.084, 36.763],
                        [121.069, 37.134],
                        [120.848, 37.696],
                        [120.850, 37.695],
                        [120.531, 37.725],
                        [120.985, 37.465],
                        [120.749, 37.208],
                        [120.910, 37.772],
                        [119.450, 36.891],
                        [119.413, 35.910],
                        [119.380, 36.661],
                        [119.640, 35.852],
                        [119.665, 36.482],
                        [119.450, 35.968],
                        [118.888, 36.618],
                        [116.385, 35.448],
                        [117.379, 35.543],
                        [117.436, 35.396],
                        [116.788, 36.098],
                        [116.466, 35.969],
                        [116.495, 36.030],
                        [117.160, 36.113],
                        [117.472, 35.847],
                        [116.788, 36.098],
                        [122.549, 37.376],
                        [122.456, 37.217],
                        [121.994, 37.299],
                        [119.003, 35.460],
                        [119.389, 35.310],
                        [119.231, 35.688],
                        [119.549, 35.479],
                        [118.587, 35.082],
                        [118.586, 35.082],
                        [118.719, 34.940],
                        [118.691, 35.586],
                        [121.994, 37.299],
                        [119.003, 35.460],
                        [118.709, 34.767],
                        [117.810, 35.170],
                        [118.340, 34.885],
                        [118.333, 34.677],
                        [119.108, 35.255],
                        [118.451, 34.702],
                        [117.371, 37.841],
                        [116.426, 37.469],
                        [116.738, 37.547],
                        [118.709, 34.767],
                        [115.881, 36.516],
                        [117.961, 37.700],
                        [118.333, 34.677],
                        [118.340, 34.885],
                        [115.914, 35.120],
                        [115.535, 35.196],
                        [115.471, 35.164],
                        [116.738, 37.547],
                        [116.017, 35.414],
                        [115.483, 35.164],
                        [115.534, 35.196],
                        [118.333, 34.677],
                        [115.915, 35.120],
                    ];

                    var markers = [];

                    const icon = new AMap.Icon({
                        size: new AMap.Size(50, 70), //图标尺寸
                        image: appleImg, //Icon 的图像
                    });

                    for (let i = 0; i < lnglats.length; i++) {
                        let item = lnglats[i];
                        let marker = new AMap.Marker({
                            position: new AMap.LngLat(item[0], item[1]),
                            icon: icon,
                        })
                        markers.push(marker);
                    }

                    var overlayGroups = new AMap.OverlayGroup(markers);

                    function addOverlayGroup () {
                        map.add(overlayGroups);
                    }

                    addOverlayGroup();

                    let point = null;
                    map.on('click', (e) => {
                        let x0 = e.lnglat.getLng(), y0 = e.lnglat.getLat();
                        console.log(x0, y0);

                        if (!point) {
                            point = new AMap.Marker({
                                position: new AMap.LngLat(x0, y0),
                                icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                                offset: new AMap.Pixel(-26, -60),
                            })
                            map.add(point);
                        } else {
                            point.setPosition(new AMap.LngLat(x0, y0));
                        }

                        let mx = lnglats[0][0], my = lnglats[0][1];
                        let dist = Math.sqrt((x0 - mx) ** 2 + (y0 - my) ** 2);

                        for (let i = 1; i < lnglats.length; i++) {
                            let item = lnglats[i];
                            let x = item[0], y = item[1];
                            let delta = Math.sqrt((x0 - x) ** 2 + (y0 - y) ** 2);

                            if (delta < dist) {
                                dist = delta;
                                mx = x;
                                my = y;
                            }
                        }

                        if (dist - 25 / 110 < 0) {
                            console.log("适宜种植")
                            ElMessage({
                                message: '适宜种植',
                                type: 'success',
                            })
                        } else {
                            console.log("不适宜种植")
                            ElMessage({
                                message: '不适宜种植',
                                type: 'error ',
                            })
                        }
                    })
                });
            });
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style scoped>
#gdMapCon {
    width: 100%;
    height: 1000px;
}
#container {
    width: 100%;
    height: 100%;
}
</style>
